<template>
  <div v-if="isMobile" class="mobile-wrapper">
    <router-view />
  </div>
  <div v-else class="pc-wapper">
    <router-view />
  </div>
</template>
<script>
import { onMounted, ref } from "vue";
import WOW from "wow.js";
import Header from "./components/pcHeader/header.vue";
export default {
  name: "App",
  components: {
    Header,
  },
  // 判断是pc还是移动端
  setup() {
    const isMobile = ref(false);

    const handleResize = () => {
      isMobile.value = window.matchMedia("(max-width: 750px)").matches;
      if (isMobile) {
        (function (doc, win) {
          let docEl = doc.documentElement, // 获取html
            resizeEvt = "resize",
            width = 750, // 设计稿宽，用时只需要修改这一处
            recalc = function () {
              const clientWidth = docEl.clientWidth; // 获取设备尺寸
              if (!clientWidth) return; // 如果没有值，回去
              if (clientWidth > width) {
                const baseSize = 100;
                const baseScale = baseSize / 1920; // 1920的设计图
                let widthScale = win.innerWidth; // 当前窗口的宽度
                const heightScale = win.innerHeight; // 当前窗口的高度
                // 尺寸换算
                const comparedHeight = (widthScale * 1250) / 1920;
                if (heightScale < comparedHeight) {
                  widthScale = (heightScale * 1920) / 1250;
                }
                // 计算实际的rem值,得到该宽度下的相应font-size值,并赋予给html的font-size,
                const rem = widthScale * baseScale;
                docEl.style.fontSize = `${rem}px`;
                // // 如果超过设计稿宽度，就给一个固定值
                // docEl.style.fontSize = "100px";
                // // docEl.style.width = width + "px";
                // docEl.style.margin = "0 auto";
                // console.log(docEl.style.fontSize, 1);
              } else {
                docEl.style.fontSize = 100 * (clientWidth / width) + "px";
                // docEl.style.width = "";
                // docEl.style.margin = "";
                // console.log(docEl.style.fontSize, 2);
              }
            };
          if (!doc.addEventListener) return; // 如果没有这个方法，中断函数
          win.addEventListener(resizeEvt, recalc, false); // 改变大小时调整一下
          doc.addEventListener("DOMContentLoaded", recalc, false); // 加载完成时调整
        })(document, window);
      }
    };
    const wowjsFn = () => {
      let wow = new WOW({
        boxClass: "wow", // animated element css class (default is wow)
        animateClass: "animated", // animation css class (default is animated)
        offset: 0, // distance to the element when triggering the animation (default is 0)
        mobile: true, // trigger animations on mobile devices (default is true)
        live: true, // act on asynchronously loaded content (default is true)
        callback: function (box) {
          // the callback is fired every time an animation is started
          // the argument that is passed in is the DOM node being animated
        },
        scrollContainer: null, // optional scroll container selector, otherwise use window
      });
      wow.init();
    };

    onMounted(() => {
      wowjsFn();
      handleResize(); // 初始化时执行一次
      window.addEventListener("resize", handleResize);
      // 移动端适配  如果为移动端则执行函数进行适配
      if (isMobile) {
        (function (doc, win) {
          let docEl = doc.documentElement, // 获取html
            resizeEvt = "resize",
            width = 750, // 设计稿宽，用时只需要修改这一处
            recalc = function () {
              const clientWidth = docEl.clientWidth; // 获取设备尺寸
              if (!clientWidth) return; // 如果没有值，回去
              if (clientWidth > width) {
                const baseSize = 100;
                const baseScale = baseSize / 1920; // 1920的设计图
                let widthScale = win.innerWidth; // 当前窗口的宽度
                const heightScale = win.innerHeight; // 当前窗口的高度
                // 尺寸换算
                const comparedHeight = (widthScale * 1250) / 1920;
                if (heightScale < comparedHeight) {
                  widthScale = (heightScale * 1920) / 1250;
                }
                // 计算实际的rem值,得到该宽度下的相应font-size值,并赋予给html的font-size,
                const rem = widthScale * baseScale;
                docEl.style.fontSize = `${rem}px`;
                // // 如果超过设计稿宽度，就给一个固定值
                // docEl.style.fontSize = "100px";
                // // docEl.style.width = width + "px";
                // docEl.style.margin = "0 auto";
                // console.log(docEl.style.fontSize, 1);
              } else {
                docEl.style.fontSize = 100 * (clientWidth / width) + "px";
                // docEl.style.width = "";
                // docEl.style.margin = "";
                // console.log(docEl.style.fontSize, 2);
              }
            };
          if (!doc.addEventListener) return; // 如果没有这个方法，中断函数
          win.addEventListener(resizeEvt, recalc, false); // 改变大小时调整一下
          doc.addEventListener("DOMContentLoaded", recalc, false); // 加载完成时调整
        })(document, window);
      }
    });
    return {
      isMobile,
    };
  },
};
</script>
<style src="wow.js/css/libs/animate.css"></style>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}
body,
html {
  width: 100%;
  /* height: 100%; */
  overflow-x: hidden;
  font-size: 16px;
}
#app {
  width: 100%;
  /* height: 100%; */
}
.pc-wapper {
  min-width: 1400px;
}
.fp-watermark {
  display: none;
}
@media screen and (max-width: 750px) {
  body,
  html {
    min-width: 1200px;
    /* width: 100%; */
    /* height: 100%; */
    overflow-x: scroll;
    font-size: 16px;
  }
}
</style>
